import React, {Component} from "react";

import {Button, Checkbox, Form, Input, message} from 'antd';
import {LockOutlined, UserOutlined} from '@ant-design/icons';

import './login.less'
import logo from "../../assets/images/logo.png"
import {reqLogin} from "../../api";
import memoryUtils from "../../utils/memoryUtils";


export default class Login extends Component {

    onFinish = async (values) => {
        const response = await reqLogin(values.username, values.password);
        const result = response.data;
        debugger
        if (result.status === 0) {
            message.success('登录成功')
            memoryUtils.user = result.data;
            this.props.history.replace('/admin')
        } else {
            message.error(result.msg)
        }
    }

    validatorPassword = (rule, value, callback) => {
        if (!value) {
            callback("请输入密码!");
        } else if (value.length < 4) {
            callback("密码长度不能少于4位!");
        } else if (value.length > 12) {
            callback("密码长度不能大于12位!");
        } else if (!/^[a-zA-Z0-9_]+$/.test(value)) {
            callback("密码必须是英文、数字或下划线组成!");
        } else {
            callback();
        }
    }

    render() {
        return (
            <div className='login'>
                <header className='login-header'>
                    <img src={logo} alt="logo"/>
                    <h1>React项目：后台管理系统</h1>
                </header>

                <section className='login-content'>
                    <h2>用户登录</h2>
                    <Form name="normal_login" className="login-form" initialValues={{remember: true}}
                          onFinish={this.onFinish}>
                        <Form.Item name="username" rules={[
                            {required: true, whitespace: true, message: '请输入用户名!'},
                            {type: "string", min: 4, message: '用户名最少4位!'},
                            {type: "string", max: 10, message: '用户名最多12位!'},
                            {pattern: /^[a-zA-Z0-9_]+$/, message: '请输入密码!'},
                        ]}>
                            <Input prefix={<UserOutlined className="site-form-item-icon"/>} placeholder="用户名"/>
                        </Form.Item>
                        <Form.Item name="password" rules={[
                            {
                                type: "string", validator: this.validatorPassword
                            }
                        ]}>
                            <Input
                                prefix={<LockOutlined className="site-form-item-icon"/>}
                                type="password"
                                placeholder="密码"
                            />
                        </Form.Item>
                        <Form.Item>
                            <Form.Item name="remember" valuePropName="checked" noStyle>
                                <Checkbox>记住我</Checkbox>
                            </Form.Item>
                            <a className="login-form-forgot" href="http://www.baidu.com" style={{marginLeft: 180}}>
                                忘记密码
                            </a>
                        </Form.Item>

                        <Form.Item>
                            <Button type="primary" htmlType="submit" className="login-form-button">
                                登录
                            </Button>
                        </Form.Item>
                    </Form>
                </section>
            </div>
        )
    }

}